<template>
  <div>
    <!-- 组件属性 -->
    <el-form
      label-position="left"
      label-width="120px"
      size="small"
    >
      <el-form-item :label="$t('formgen.formItemConfig.itemId')">
        <div
          v-copyText="activeData.config.formId"
          class="id-wrap"
        >
          {{ activeData.config.formId }}
        </div>
      </el-form-item>
      <el-form-item :label="$t('formgen.formItemConfig.customId')">
        <template #label>
          <span>
            {{ $t("formgen.formItemConfig.customId") }}
            <el-tooltip
              class="item"
              :content="$t('formgen.formItemConfig.customIdText')"
              effect="dark"
              placement="top-start"
            >
              <el-icon><ele-QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-input
          v-model="activeData.customId"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="activeData.config.componentName !== undefined"
        :label="$t('formgen.formItemConfig.itemName')"
      >
        {{ activeData.config.componentName }}
      </el-form-item>
      <!--      <el-form-item-->
      <!--        v-if="-->
      <!--          activeData.config.label !== undefined &&-->
      <!--            activeData.config.showLabel !== false "-->
      <!--        label="标题"-->
      <!--      >-->
      <!--        <el-input-->
      <!--          v-model="activeData.config.label"-->
      <!--          placeholder="请输入标题"-->
      <!--          @input="changeRenderKey"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item
        v-if="activeData.placeholder !== undefined"
        :label="$t('formgen.formItemConfig.placeholder')"
      >
        <el-input
          v-model="activeData.placeholder"
          :placeholder="$t('formgen.formItemConfig.inputPlaceholder')"
          @input="changeRenderKey"
        />
      </el-form-item>
      <el-form-item
        v-if="activeData.config.span !== undefined"
        :label="$t('formgen.formItemConfig.labelWidth')"
      >
        <el-slider
          v-model="activeData.config.span"
          :marks="{ 12: '' }"
          :max="24"
          :min="1"
        />
      </el-form-item>
      <el-form-item
        v-if="activeData.config.layout === 'rowFormItem' && activeData.gutter !== undefined"
        :label="$t('formgen.formItemConfig.gridSpacing')"
      >
        <el-input-number
          v-model="activeData.gutter"
          :min="0"
          :placeholder="$t('formgen.formItemConfig.gridSpacing')"
        />
      </el-form-item>
      <el-form-item
        v-if="activeData.config.layout === 'rowFormItem' && activeData.type !== undefined"
        :label="$t('formgen.formItemConfig.layoutModel')"
      >
        <el-radio-group v-model="activeData.type">
          <el-radio-button
            label="default"
            value="default"
          />
          <el-radio-button
            label="flex"
            value="default"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="activeData.justify !== undefined && activeData.type === 'flex'"
        :label="$t('formgen.formItemConfig.horizontal')"
      >
        <el-select
          v-model="activeData.justify"
          :style="{ width: '100%' }"
          :placeholder="$t('formgen.formItemConfig.horizontal')"
        >
          <el-option
            v-for="(item, index) in justifyOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="activeData.align !== undefined && activeData.type === 'flex'"
        :label="$t('formgen.formItemConfig.vertical')"
      >
        <el-radio-group v-model="activeData.align">
          <el-radio-button
            label="top"
            value="top"
          />
          <el-radio-button
            label="middle"
            value="middle"
          />
          <el-radio-button
            label="bottom"
            value="bottom"
          />
        </el-radio-group>
      </el-form-item>
      <form-item-exam-config
        v-if="formConf.type == 4"
        :active-data="activeData"
      />
      <el-form-item v-if="activeData.vModel !== undefined && activeData.config.showDefaultValue !== false">
        <template #label>
          <span>
            {{ $t("formgen.formItemConfig.default") }}
            <el-tooltip
              class="item"
              :content="$t('formgen.formItemConfig.defaultText')"
              effect="dark"
              placement="top-start"
            >
              <el-icon><ele-QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-button
          text
          bg
          type="primary"
          @click="$refs.defaultValueConfig.open()"
        >
          {{ $t("formgen.formItemConfig.setting") }}
        </el-button>
        <el-link
          class="ml20"
          @click="clearDefaultValue()"
          size="small"
          type="danger"
        >
          {{ $t("formgen.formItemConfig.clear") }}
        </el-link>
      </el-form-item>
      <el-form-item
        v-if="activeData.config.showLabel !== undefined"
        :label="$t('formgen.formItemConfig.showTitle')"
      >
        <el-switch v-model="activeData.config.showLabel" />
      </el-form-item>

      <el-form-item
        v-if="activeData.clearable !== undefined"
        :label="$t('formgen.formItemConfig.isClear')"
      >
        <el-switch v-model="activeData.clearable" />
      </el-form-item>

      <el-form-item
        v-if="activeData.readonly !== undefined"
        :label="$t('formgen.formItemConfig.readOnly')"
      >
        <el-switch v-model="activeData.readonly" />
      </el-form-item>

      <el-form-item>
        <template #label>
          <span>
            {{ $t("formgen.formItemConfig.hideItem") }}
            <el-tooltip
              class="item"
              :content="$t('formgen.formItemConfig.hideItemText')"
              effect="dark"
              placement="top-start"
            >
              <el-icon><ele-QuestionFilled /></el-icon>
            </el-tooltip>
          </span>
        </template>

        <el-switch v-model="activeData.config.hideType" />
      </el-form-item>
      <el-form-item :label="$t('formgen.formItemConfig.titleDesc')">
        <el-switch v-model="activeData.titleDesc" />
      </el-form-item>
      <div v-if="activeData.titleDesc">
        <form-tinymce v-model:value="activeData.description" />
      </div>

      <el-form-item
        v-if="activeData['color'] !== undefined"
        :label="$t('formgen.formItemConfig.color')"
      >
        <el-color-picker v-model="activeData['color']" />
      </el-form-item>

      <el-form-item
        v-if="activeData.config.required !== undefined && activeData.config.showRequired !== false"
        :label="$t('formgen.formItemConfig.required')"
      >
        <el-switch v-model="activeData.config.required" />
      </el-form-item>
      <div v-if="activeData">
        <component
          :is="configComponent(activeData)"
          :active-data="activeData"
          :form-conf="formConf"
          :fields="fields"
          @add-fields="
            val => {
              emit('add-fields', val);
            }
          "
        />
      </div>
      <template v-if="Array.isArray(activeData.config.regList) && activeData.config.showRegList !== false">
        <el-divider>{{ $t("formgen.formItemConfig.regularVerification") }}</el-divider>
        <div
          v-for="(item, index) in activeData.config.regList"
          :key="index"
          class="reg-item"
        >
          <span
            class="close-btn"
            @click="activeData.config.regList.splice(index, 1)"
          >
            <el-icon><ele-Close /></el-icon>
          </span>
          <el-form-item :label="$t('formgen.formItemConfig.regularExpression')">
            <template #label>
              <span>
                {{ $t("formgen.formItemConfig.regularExpression") }}
                <el-tooltip
                  class="item"
                  :content="$t('formgen.formItemConfig.regularExpressionText')"
                  effect="dark"
                  placement="top-start"
                >
                  <el-icon><ele-QuestionFilled /></el-icon>
                </el-tooltip>
              </span>
            </template>
            <el-input
              v-model="item.pattern"
              :placeholder="$t('formgen.formItemConfig.inputRegular')"
            />
          </el-form-item>
          <el-form-item
            :label="$t('formgen.formItemConfig.errorTips')"
            style="margin-bottom: 0"
          >
            <el-input
              v-model="item.message"
              :placeholder="$t('formgen.formItemConfig.errorTips')"
            />
          </el-form-item>
        </div>
        <div style="margin-left: 20px">
          <el-button
            icon="ele-CirclePlus"
            link
            type="primary"
            @click="addReg"
          >
            {{ $t("formgen.formItemConfig.addRegular") }}
          </el-button>
        </div>
      </template>
      <custom-validate-list
        :active-data="activeData"
        :fields="fields"
      />
    </el-form>
    <default-value-config
      ref="defaultValueConfig"
      :current-item="activeData"
    />
  </div>
</template>

<script setup name="FormItemConfig">
import { ref, watch } from "vue";
import { debounce, toLower } from "lodash-es";
import DefaultValueConfig from "../right/DefaultValueConfig.vue";
import FormItemExamConfig from "../exam/FormItemExamConfig.vue";
import FormTinymce from "@/views/formgen/components/tinymce/index.vue";
import CustomValidateList from "../right/CustomValidateList.vue";
import * as ConfigItemMap from "../ItemConfig/index";

const configComponent = data => {
  const typeId = data.typeId;

  let name = toLower(typeId.replaceAll("_", ""));
  if (["INPUT", "TEXTAREA"].includes(typeId)) {
    name = `input`;
  } else if (["PHONE_VERIFICATION", "VALIDATE_CODE", "DEPT_SELECT"].includes(typeId)) {
    name = `empty`;
  }
  return ConfigItemMap[name] || ConfigItemMap["empty"];
};

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {}
  },
  formConf: {
    type: Object,
    default: () => {}
  },
  fields: {
    type: Array,
    default: () => []
  }
});

const justifyOptions = ref([
  { label: "start", value: "start" },
  { label: "end", value: "end" },
  { label: "center", value: "center" },
  { label: "space-around", value: "space-around" },
  { label: "space-between", value: "space-between" }
]);

// Methods
const addReg = () => {
  props.activeData.config.regList.push({ pattern: "", message: "" });
};

const clearDefaultValue = () => {
  let defaultValue = null;
  if (Array.isArray(props.activeData.config.defaultValue)) {
    defaultValue = [];
  } else if (Object.getPrototypeOf({}) === Object.prototype) {
    defaultValue = {};
  }
  props.activeData.config["defaultValue"] = defaultValue;
};

const emit = defineEmits(["data-change", "add-fields"]);

const dataChange = debounce(val => {
  emit("data-change", val);
}, 430);

const changeRenderKey = () => {
  props.activeData.config.renderKey = +new Date();
};

// Watchers
watch(
  () => props.activeData,
  (newValue, oldValue) => {
    if (newValue.config.formId === oldValue.config.formId) {
      if (newValue) {
        dataChange(newValue);
      }
    }
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/right";

.id-wrap {
  cursor: pointer;
}
</style>
